<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/assets/css/layui.css">
    <link rel="stylesheet" href="/static/assets/css/view.css"/>
    <title>Title</title>
</head>
<body>
<body class="layui-view-body">
<div class="layui-content">
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-header">表单</div>
            <div class="layui-row">
                <form class="layui-form layui-card-body" action="">
                    <div class="layui-col-xs6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户ID</label>
                            <div class="layui-input-inline">
                                <input id="userId" type="text" name="title" required lay-verify="required"
                                       placeholder="请输入标题" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input id="userName" type="text" name="title" required lay-verify="required"
                                       placeholder="请输入标题" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">电话号码</label>
                            <div class="layui-input-inline">
                                <input id="userTel" type="text" name="userTel" required lay-verify="required"
                                       placeholder="请输入标题" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-upload layui-col-xs6">
                        <div class="layui-form-item">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn" id="test1">更换头像</button>
                                <div class="layui-upload-list">
                                    <img style="width: 200px;height: 160px" class="layui-upload-img" id="headImg">
                                    <p id="demoText"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-form-item" style="margin-left: 100px;">
                            <div class="layui-input-inline">
                                <button class="layui-btn" lay-submit lay-filter="formDemo" id="update">修改</button>
                                <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="/static/assets/layui.js"></script>
<script src="/static/assets/jquery.min.js"></script>
<script>
    $(function () {
        var userId = sessionStorage.getItem("userId");

        function loadHeadImg() {
            $.ajax({
                url: "/user/selectById"
                , type: "post"
                , headers: {'Content-Type': 'application/json;charset=utf8'}
                , data: JSON.stringify({userId: userId})
                , dataType: "json"
                , success: function (data) {
                    console.log("id查询用户成功")
                    console.log(data)
                    var user = data.data.user
                    $("#userId").val(user.userId)
                    $("#userName").val(user.userName)
                    $("#userTel").val(user.userTel)
                    $("#userPwd").val(user.userPwd)
                    $("#headImg").attr("src", user.headImg)
                }
                , error: function () {
                    console.log("请求失败")
                }
            })
        }

        loadHeadImg()
        //Demo
        layui.use(['form', 'layer', 'upload'], function () {
            var form = layui.form,
                upload = layui.upload,
                layer = layui.layer

            filePath = null
            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                , url: '/upload/show'
                , accept: 'images'
                , size: 50000
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    filePath = res.data.filePath
                    //如果上传失败
                    if (res.code !== 200) {
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #4cae4c;">上传成功</span>');

                    var fileupload = $("#headImg");
                    fileupload.attr("src", filePath);
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });

            //监听提交
            $("#update").click(function () {
                var userTel = $("#userTel").val()
                $.ajax({
                    url: "/user/updateUser",
                    type: "post",
                    dataType: "json",
                    data: {
                        headImg: filePath,
                        userTel: userTel,
                        userId: userId
                    },
                    success: function (res) {
                        layer.msg("修改成功")
                    },
                    error: function (data) {

                    }
                })
            })

        });
    })

</script>
</body>
</body>
</html>